import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Button,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

interface TableProps extends FormComponentProps {
  dispatch: Dispatch;
  dataInfo: any;
  INITINFO: any;
  loading: boolean;
}

interface TableState {

}

@connect(({
  tookManagementList: { dataInfo },
  common: { INITINFO },
  loading,
}: any) => ({
  dataInfo,
  INITINFO,
  loading: loading.effects['tookManagementList/fetch'],
}))

class TookManagementElem extends React.Component<TableProps, TableState> {
  columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
    },
    {
      title: '取件收益',
      children: [
        {
          title: '快递公司',
          dataIndex: 'express_name',
        },
        {
          title: '投递收益(元)',
          dataIndex: 'send_price',
        },
        {
          title: '取件数',
          dataIndex: 'number',
        },
        {
          title: '支付宝取件费(元)',
          dataIndex: 'alipay_price',
        },
        {
          title: '微信取件费',
          dataIndex: 'wechat_price',
        },
        {
          title: '余额取件费(元)',
          dataIndex: 'amount_price',
        },
        {
          title: '现金取件费(元)',
          dataIndex: 'money_price',
        },
      ],
    },
    {
      title: '派件',
      children: [
        {
          title: '接驳数',
          dataIndex: 'shuttle_number',
        },
        {
          title: '派件数',
          dataIndex: 'send_number',
        },
        {
          title: '单价(元)',
          dataIndex: 'price',
        },
        {
          title: '收入(元)',
          dataIndex: 'income',
        },
      ],
    },
    {
      title: '揽件',
      children: [
        {
          title: '接驳数',
          dataIndex: 'shuttle_number',
        },
        {
          title: '派件数',
          dataIndex: 'send_number',
        },
        {
          title: '单价(元)',
          dataIndex: 'price',
        },
        {
          title: '收入(元)',
          dataIndex: 'income',
        },
      ],
    },
    {
      title: '财务结算',
      children: [
        {
          title: '利润(元)',
          dataIndex: 'shuttle_number',
        },
        {
          title: '线上支付(元)',
          dataIndex: 'send_number',
        },
        {
          title: '线上退款(元)',
          dataIndex: 'price',
        },
        {
          title: '应上交金额(元)',
          dataIndex: 'income',
        },
      ],
    },
  ]

  state = {

  }

  componentDidMount() {

  }

  render() {
    const { loading } = this.props;
    const dataSource: any[] = [];
    const pagination = {};
    return (
      <>
        <PageHeader />
        <Card className="tableList statementTable" bordered={false} title="数据详情">
          <Table
            rowKey="id"
            tableLayout="fixed"
            columns={this.columns}
            dataSource={dataSource}
            pagination={pagination}
            loading={loading}
            scroll={{ x: 2500 }}
          />
        </Card>
        <Card
          bordered={false}
          title="差异原因"
          extra={<Button type="primary" size="small">提交</Button>}
        />
        <Card bordered={false} title="操作日志">
          <div>核对人：张三丰</div>
          <div>核对时间：2019-12-20 12:22:53</div>
          <div>确认人：张无忌</div>
          <div>确认时间：2019-12-20 12:22:53</div>
        </Card>
      </>
    );
  }
}

export default Form.create<TableProps>()(TookManagementElem);
